import axios from "axios";
import React, { useEffect, useState } from "react";
import "./style.css";
import { List, PullRefresh } from "react-vant";
import { NavLink } from "react-router-dom";
import QueryString from "qs";

const Home = () => {
  const [list, setList] = useState([]);
  const _getData = async () => {
    const resp = await axios.get("/api/list");
    setList([...list, ...resp.data.data]);
  };
  const onRefresh = async () => {
    const resp = await axios.get("/api/list");
    setList(resp.data.data);
  };

  useEffect(() => {
    _getData();
  }, []);
  return (
    <div>
      <PullRefresh onRefresh={onRefresh}>
        <List onLoad={_getData}>
          {list.map((v) => {
            return (
              <NavLink
                to={{ pathname: "/user", search: QueryString.stringify(v) }}
                key={v.id}
              >
                <dl>
                  <dt>
                    <img src={v.image[0]} alt="" width={120} height={80} />
                  </dt>
                  <dd>
                    <h3>{v.title}</h3>
                    <p>{v.desc}</p>
                  </dd>
                </dl>
              </NavLink>
            );
          })}
        </List>
      </PullRefresh>
    </div>
  );
};

export default Home;



// const v = { name: '张三', age: 18}



// "name=张三&age=18"